{% extends "base.html" %}
{% block content %}
<div class="header clearfix">
    <h4 class="text-muted">当月报表</h4>
    <a href="/index" class="btn btn-primary" style="right:20%">返回列表</a>
</div>

<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var context = '{{ context|tojson }}';
    var obj = JSON.parse(context);
    option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'line'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['最低温度', '最低湿度','最高温度','最高湿度'],
                itemGap:10,
                itemWidth: 20,
                itemHeight:20
            },
            toolbox: {
                show: false,
                feature: {
                    mark: { show: false },
                    dataView: { show: false, readOnly: false },
                    magicType: { show: false, type: ['line', 'bar', 'stack', 'tiled'] },
                    restore: { show: false },
                    saveAsImage: { show: false }
                }
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: true,
                    data: obj.createTimes
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '最低温度',
                    type: 'bar',
                    stack: '最低温度',
                    data: obj.minTemperatures
                },
                {
                    name: '最低湿度',
                    type: 'bar',
                    stack: '最低湿度',
                    data: obj.minHumiditys
                },
                {
                    name: '最高温度',
                    type: 'bar',
                    stack: '最高温度',
                    data: obj.maxTemperatures
                },
                {
                    name: '最高湿度',
                    type: 'bar',
                    stack: '最高湿度',
                    data: obj.maxHumiditys
                }
            ]
        };
        myChart.setOption(option);
    
</script>
<!--endblock要成对出现-->
{% endblock %}


